<template>
  <div class="dengdai">
    <div v-for="item in jiulists"
         :key="item.help_id"
         class="jiulist">
      <div class="img">
        <div class="qian">
          <p>救助前</p>
          <img :src="item.befor_img"
               alt="">
        </div>
        <div class="hou">
          <p>救助后</p>
          <img v-if="item.status=='救助完成'"
               :src="item.after_img"
               alt="">
          <img v-if="item.status=='救助失败'"
               src="/imgs/baoqian.jpg"
               alt="">
        </div>
      </div>
      <div class="xiang">
        <p>
          <span class="title">发起时间：</span>
          <span>{{item.go_time}}</span>
        </p>
        <p>
          <span class="title">发起人姓名：</span>
          <span>{{item.true_name}}</span>
        </p>
        <p>
          <span class="title">联系方式：</span>
          <span>{{item.phone}}</span>
        </p>
        <p>
          <span class="title">救助种类：</span>
          <span>{{item.breed}}</span>
        </p>
        <p>
          <span class="title">救助地址：</span>
          <span>{{item.address}}</span>
        </p>
        <p>
          <span class="title">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
          <span class="beizhu">{{item.remark}}</span>
        </p>
        <p>
          <span class="title">救助状态：</span>
          <span v-if="item.status=='救助完成'">{{item.status}}</span>
          <span v-if="item.status=='救助失败'"
                style="color:red">{{item.status}}</span>
        </p>
        <p v-if="item.status=='救助完成'">
          <span class="title">救助完成时间：</span>
          <span>{{item.end_time}}</span>
        </p>
        <p v-if="item.status=='救助失败'">
          <span class="title">失败原因：</span>
          <span style="color:red">{{item.reason}}</span>
        </p>
      </div>
    </div>
  </div>
</template>



<script>
import { onMounted, ref } from 'vue'
import axios from '@/axios'
export default {
  components: {},
  setup() {
    let jiulists = ref([])
    let hello = ref('hello')
    const username = localStorage.getItem('username')
    onMounted(() => {
      //获取救助列表
      axios
        .get('/jiuchong', { username: username })
        .then((d) => {
          //过滤数据
          jiulists.value = d.filter((item) => {
            return item.status == '救助完成' || item.status == '救助失败'
          })

          // console.log(jiulists.value)
        })
        .catch((err) => console.log(err))
    })

    return {
      hello,
      jiulists
    }
  }
}
</script>

<style scoped lang="less">
.dengdai {
  width: 1000px;
  margin: 0 auto;
  .jiulist {
    display: flex;
    margin: 20px 0;
    border: 2px solid #ccc;
    .img {
      width: 500px;
      height: 250px;
      display: flex;
      align-items: center;
      .qian {
        width: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid #ccc;
        p {
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          font-weight: 600;
        }
        img {
          width: 250px;
          height: 200px;
        }
      }
      .hou {
        width: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 1px solid #ccc;
        p {
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          font-weight: 600;
        }
        img {
          width: 250px;
          height: 200px;
        }
      }
    }
    .xiang {
      padding: 10px 30px;
      p {
        margin: 5px 0;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        .title {
          font-size: 18px;
          font-weight: 500;
          margin-right: 10px;
        }
        .beizhu {
          display: inline-block;
          width: 300px;
          white-space: nowrap; /* 禁止换行 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>

